<style>
    .flash{
        background: none repeat scroll 0 0 transparent !important;
        height: 25px !important;
        left: 128px !important;
        opacity: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        top: 1px !important;
        width: 88px !important;
        z-index: 99 !important;
    }
    #uploadQueue{
        margin: 7px 0;
    }
    .message{
        display: none;
    }
</style>

<div class="container">

    <div class="page-header">
        <div class="row">
            <h1 class="span8">Add Gallery / Images</h1>
            <span class="span4">

            </span>
        </div>


    </div>

    <div class="row">

        <div class="span8">


            <div id="wpbody-content">

                <!-- jQuery Tabs script -->
                <script type="text/javascript">

                    jQuery(document).ready(function(){
                            jQuery('html,body').scrollTop(0);
                            jQuery('#slider').tabs({ fxFade: true, fxSpeed: 'fast' });
                            //jQuery('#slider').tabs( "select", 2 ); // activate second tab 
                            jQuery('#slider').css('display', 'block');

                    });

                </script>

                <div style="display: none;" class="wrap" id="slider">

                    <ul id="tabs">

                        <li><a href="#uploadimage">Upload Images</a></li>
                        <!--<li><a href="#uploadvideo">Upload Videos</a></li>-->
                        <li><a href="#addgallery">Add new gallery</a></li>

                    </ul>

                    <!--UPLOAD IMAGES-->
                    <div id="uploadimage">

                        <h2> Upload Images </h2>

                        <form accept-charset="utf-8" action="<?=base_url()?><?=$link?>/submit_gallery" enctype="multipart/form-data" method="POST" id="uploadimage_form" name="uploadimage">           

                            <input type="hidden" value="new-pictures" name="post_action">

                            <table class="form-table">

                                <tbody>

                                    <tr valign="top">

                                        <td class="upload_text">Upload image</td>

                                        <td>

                                            <div id="plupload-upload-ui">

                                                <div>
                                                    Choose files to upload                        
                                                    <input type="button" class="button btn btn-mini" value="Select Files" id="plupload-browse-button" style="position: relative; z-index: 0;">
                                                </div>

                                                <div id="uploadQueue"></div>

                                            </div>

                                        </td>

                                    </tr> 

                                    <tr valign="top"> 

                                        <td class="upload_text">in to</td> 

                                        <td>

                                            <select id="galleryselect" name="galleryselect">
                                                <option value="0">Choose gallery</option>

                                                <? foreach(config_item('page_types') as $page_type): 

                                                        $galleries = $this->gallery_model->view_all($page_type);

                                                        /*$this->firephp->log($this->db->last_query());
                                                        $this->firephp->log($galleries);*/

                                                        if($page_type=='news')$page_type= 'Latest News';?>

                                                    <optgroup label="<?=ucfirst($page_type);?>">

                                                    <? foreach($galleries as $pg): ?>                                                     

                                                        <option value="<?=$pg['ID']?><--delimiter!--><?=$pg['path']?>"><?=$pg['title']?></option>

                                                        <? $children = $this->gallery_model->view_all_children($pg['ID']); ?>

                                                        <? foreach($children as $child): ?>

                                                            <option value="<?=$child['ID']?><--delimiter!--><?=$child['path']?>"> -- <?=$child['title']?></option>      

                                                            <? endforeach; ?>                                                           

                                                        <? endforeach; ?>                                                                                                            

                                                    <? endforeach; ?>

                                            </select>

                                            <br>                
                                            <br>

                                        </td> 

                                    </tr> 

                                </tbody>

                            </table>

                            <div class="submit row"> 

                                <span class="span2 ml-15> save2" style="width: 130px !important;"><input type="button" value="Upload images" class="btn" id="plupload_btn" name="uploadimage"></span>
                                <div class="span5 loader">
                                    <div style="float:left; width: 34px"><img id="ajax-loading" class="ajax-loading" src="<?=base_url()?>assets/img/backgnds/loading.gif" style="visibility: hidden;"></div>
                                    <div style="float:left" class="message"><p>Please wait while images are being uploaded</p></div>

                                </div>

                            </div>

                        </form>

                    </div>
                    <!--/UPLOAD IMAGES-->

                    <!--UPLOAD VIDEO-->
                    <div id="uploadvideo" class="clearfix" style="display: none;">

                        <div class="v-left">

                            <h2> Upload Videos </h2>

                            <form accept-charset="utf-8" action="<?=base_url()?><?=$link?>/submit_gallery" enctype="multipart/form-data" method="POST" id="uploadvideo_form" name="uploadvideo">           

                                <input type="hidden" value="new-videos" name="post_action">

                                <table class="form-table">

                                    <tbody>

                                        <tr valign="top">

                                            <td class="upload_text">Upload video</td>

                                            <td>

                                                <div>

                                                    <div>
                                                        <input type="text" name="yt-link" id="yt-link" value="" />                       
                                                        <input type="button" class="button btn btn-mini" value="Check Link" id="yt-check" style="position: relative; z-index: 0;">
                                                    </div>

                                                </div>

                                            </td>

                                        </tr> 

                                        <tr valign="top">

                                            <td class="upload_text">Name</td>

                                            <td>

                                                <div>

                                                    <div>
                                                        <input type="text" name="yt-name" id="yt-name" value="" />                       
                                                    </div>

                                                </div>

                                            </td>

                                        </tr> 

                                        <tr valign="top"> 

                                            <td class="upload_text">in to</td> 

                                            <td>

                                                <select id="galleryselect2" name="galleryselect2">
                                                    <option value="0">Choose gallery</option>

                                                    <? foreach($all_galleries as $one_gallery):?>
                                                        <option value="<?=$one_gallery['ID']?><--delimiter!--><?=$one_gallery['path']?>" class="level-0"><?=$one_gallery['title']?></option>
                                                        <? endforeach; ?>
                                                </select>

                                                <br>                
                                                <br>

                                            </td> 

                                        </tr> 

                                    </tbody>

                                </table>

                                <div class="submit">

                                    <input type="button" value="Upload videos" id="v-upload" name="uploadvideo" class="btn">
                                    <img id="ajax-loading" class="ajax-loading" src="<?=base_url()?>assets/img/backgnds/loading.gif" style="visibility: hidden;">
                                    <div class="updated below-h2 message">

                                        <p>Please wait while creating video link</p>

                                    </div>

                                </div>

                            </form>

                        </div>

                        <div class="v-left">

                            <div id="video-preview"></div>

                        </div>

                    </div>
                    <!--/UPLOAD VIDEO-->

                    <!--ADD GALLERY-->
                    <div id="addgallery">

                        <!-- create gallery -->
                        <h2> Add new gallery </h2>

                        <form accept-charset="utf-8" action="<?=base_url()?><?=$link?>/submit_gallery" method="POST" id="addgallery_form" name="addgallery">

                            <input type="hidden" value="new-gallery" name="post_action">            

                            <table class="form-table"> 
                                <tbody>


                                    <tr valign="top"> 

                                        <td class="upload_text">New Gallery:</td> 

                                        <td>

                                            <input type="text" value="" name="galleryname" size="43">

                                            <i>( Allowed characters are: a-z, A-Z, 0-9, _ )</i>

                                        </td>

                                    </tr>

                                    <tr valign="top"> 

                                        <td class="upload_text">Gallery Type</td> 

                                        <td>           

                                            <select id="post_type" name="type">
                                                <option value="0" selected="selected">--Please select </option>

                                                <? foreach(config_item('page_types') as $page_type): ?>

                                                    <option value="<?=$page_type?>">
                                                        <?  if($page_type=='news')$page_type= 'Latest News';?>
                                                        <?=ucfirst($page_type);?>

                                                    </option>

                                                    <? endforeach; ?>
                                            </select>

                                        </td> 

                                    </tr>

                                    <tr valign="top"> 

                                        <td class="upload_text">Parent</td> 

                                        <td>           

                                            <select id="parent_id" name="parent_id">
                                                <option value="0" selected="selected">(no parent)</option>

                                                <? foreach(config_item('page_types') as $page_type): 

                                                        $galleries = $this->gallery_model->view_all($page_type);

                                                        /*$this->firephp->log($this->db->last_query());
                                                        $this->firephp->log($galleries);*/

                                                        if($page_type=='news')$page_type= 'Latest News';?>

                                                    <optgroup label="<?=ucfirst($page_type);?>">

                                                    <? foreach($galleries as $pg): ?>

                                                        <option value="<?=$pg['ID']?>"><?=$pg['title']?></option>

                                                        <? $children = $this->gallery_model->view_all_children($pg['ID']); ?>

                                                        <!--<? foreach($children as $child): ?>

                                                            <option value="<?=$child['ID']?>"> -- <?=$child['title']?></option>


                                                            <? endforeach; ?>  -->

                                                        <? endforeach; ?>

                                                    <? endforeach; ?>
                                            </select>

                                            <br>                
                                            <br>

                                        </td> 

                                    </tr> 

                                </tbody>

                            </table>

                            <div class="submit row"> 

                                <span class="span2 ml-15> save2"><input type="submit" value="Add gallery" class="btn" id="add_gallery" disabled="disabled"></span>
                                <span class="span4 loader"><img id="ajax-loading" class="ajax-loading" src="<?=base_url()?>assets/img/backgnds/loading.gif" style="visibility: hidden;"></span>

                            </div>

                        </form>

                    </div>
                    <!--/ADD GALLERY-->

                </div>

                <div class="clear"></div>

            </div>

            <!--ADD Gallery SCRIPT-->
            <script type="text/javascript">

                // Override default error message
                jQuery.validator.messages.required = "";

                jQuery.validator.addMethod(
                    "regex",
                    function(value, element, regexp) {
                        var check = false;
                        return this.optional(element) || regexp.test(value);
                    },
                    "Please check your input."
                );


                // Override generation of error label
                jQuery("#addgallery_form").validate({
                        rules: {
                            galleryname: {
                                required: true,
                                /*regex: /^\s*[A-Za-z0-9 -_\s]+s*$/*/
                                regex: /^\w+$/
                            }
                        },
                        submitHandler: function(form) {

                            if(jQuery('input[name="galleryname"]').val()==""){
                                alert('Enter gallery name');
                                return false;
                            }

                            if(jQuery('#post_type').val()==0){
                                alert('Please choose gallery type!');
                                return false;
                            }


                            jQuery('#add_gallery').attr('disabled','disabled');
                            var form = jQuery("#addgallery_form");
                            var form_data = form.serialize();

                            jQuery('.ajax-loading').css('visibility','visible');

                            jQuery.ajax({
                                    url: form.attr('action'),
                                    dataType: 'json',
                                    type: "POST",
                                    data: form_data,
                                    success: function (data, textStatus, xhr) {
                                        jQuery('.ajax-loading').css('visibility','hidden');

                                        if(data.action){
                                            jQuery('.loader').html(data.msg);
                                            // REDIRECT
                                            function promo_show(){
                                                window.location.href = base_url+'<?=$link?>'+'/view_new?post_type=<?=$post_type?>'; 
                                            }
                                            window.setTimeout(function() { promo_show(); }, 1001);
                                        }else{
                                            alert(data.msg);
                                            jQuery('#add_gallery').removeAttr('disabled');                            
                                        }

                                    },
                                    error: function (xhr, textStatus, errorThrown) {
                                        jQuery('.ajax-loading').css('visibility','hidden');
                                        alert('Error ocured...\n Server not found.');
                                        jQuery('#add_gallery').removeAttr('disabled');

                                    }
                            });

                            return false;

                        },
                        errorPlacement: function(error, element){}


                });

                jQuery('#add_gallery').removeAttr('disabled');

            </script>                        

            <!-- jQuery Upload Files script -->
            <script type="text/javascript">

                jQuery(document).ready(function(){

                        var folder = 'tempatt/';

                        var uploader = new plupload.Uploader({

                                runtimes: 'flash',
                                flash_swf_url: base_url+'assets/js/plupload/plupload.flash.swf',
                                browse_button: 'plupload-browse-button ',
                                container: 'plupload-upload-ui',
                                url: base_url+'assets/js/plupload/upload.php',
                                multipart : false,
                                multipart_params: { 'datafield': folder },
                                unique_names: false ,
                                /*resize : { quality : 80},  */
                                // Specify what files to browse for
                                filters : [
                                    {title : "Image files", extensions : "jpg,jpeg,gif,png,JPG,JPEG,GIF,PNG"}
                                ]

                        });

                        uploader.settings.multipart_params.datafield = folder;    

                        uploader.init();

                        uploader.bind('FilesAdded', function(up, files) {        
                                // loop through the files array
                                for (var i in files) {            
                                    document.getElementById('uploadQueue').innerHTML += '<div id="' + files[i].id + '">[<a href="javascript:">remove</a>] ' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';            
                                }
                                //console.log(uploader.settings.multipart_params.datafield)  
                        });

                        uploader.bind('UploadProgress', function(up, file) {        
                                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";        
                        });

                        uploader.bind('Error', function(up, args) {        
                                alert(args.code + ': ' + args.message);        
                        });

                        document.getElementById('plupload_btn').onclick = function() { 

                            if(jQuery('#uploadQueue').children().length==0){
                                alert('Please select files to upload')
                                return false;
                            }

                            if(jQuery('#galleryselect').val()==0){
                                alert('Please choose gallery')
                                return false;
                            }

                            jQuery('#uploadimage .ajax-loading').css('visibility','visible');
                            jQuery('#uploadimage .message p').html('Please wait while images are being uploaded');
                            jQuery('#uploadimage .message').show();

                            uploader.start();         
                        };

                        uploader.bind('BeforeUpload', function(up, file) {

                                galleryselect = jQuery("#galleryselect").val();

                                path = galleryselect.split("<--delimiter!-->");

                                up.settings.url =  base_url+'assets/js/plupload/upload.php'+"?gellery_path="+"pro-gallery/"+path[1]+'/';
                        });


                        uploader.bind('FileUploaded', function(up, file, info) {                      

                                /*console.log(up);
                                console.log(file);
                                console.log(info);
                                console.log(info.response);   //"{"jsonrpc" : "2.0", "result" : null, "id" : "id", "datafield" : "accommodationsbanner_01_15.jpg"}"                         
                                */

                                var obj = jQuery.parseJSON(info.response);
                                //console.log(obj.datafield);                             

                                jQuery('#uploadimage_form').append('<input type="hidden" name="pictures[]" value="'+obj.datafield+'" />');
                                jQuery('#uploadimage_form').append('<input type="hidden" name="pic_titles[]" value="'+file.name+'" />');

                                if( (uploader.total.uploaded) == uploader.files.length) {
                                    //window.location = 'uploaded.php?file=' + encodeURIComponent(File.name);
                                    //console.log("uploaded complete:"+File.name);
                                    //alert("Upload complete")
                                    jQuery('#uploadimage .message p').html('Creating thumbnails :: Please wait');
                                    jQuery('#uploadimage_form').submit();

                                };

                        });

                        jQuery('#uploadQueue a').live('click', function(){

                                jQuery(this).parent().fadeOut('slow').remove();
                        })

                });

            </script>

            <!-- jQuery Upload Videos script -->
            <script language="JavaScript">
                $(function() {

                        $('#yt-check').live('click', function(){

                                var file = $('#yt-link').val();

                                if(file == ''){
                                    alert("Molio unesite link.");
                                    return;
                                }

                                $('#video-preview').html('<iframe width="270" height="170" src="http://www.youtube.com/embed/'+file+'" frameborder="0" allowfullscreen></iframe>');

                        });



                        jQuery('input[name="uploadvideo"]').live('click',function(){

                                if(jQuery('#galleryselect2').val()!=0){
                                    jQuery('#uploadvideo_form').submit();
                                    jQuery('#uploadvideo .ajax-loading').css('visibility','visible');
                                    jQuery('#uploadvideo .message p').html('Please wait while creating video link');
                                    jQuery('#uploadvideo .message').show();
                                }else{
                                    alert('Please choose gallery')
                                    return false;
                                }

                        });

                });
            </script>

        </div>

        <div class="span4">

            <div class="hero-unit">
                <h3><?=ucfirst($post_type)?></h3>
                <p>
                    <a class="btn btn-large" href="<?=base_url($link.'/view_all?post_type='.$post_type.'&type=all')?>">
                        <i class="icon-camera"></i> View All <?=ucfirst($post_type)?>
                    </a>
                </p>
            </div>

        </div>

    </div>

</div> <!-- /container -->